<template>
  <el-card class="card">
    <div class="hello-world" ref="hello"></div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts/core';
import {
    CanvasRenderer
} from 'echarts/renderers';
import {
    GlobeComponent
} from 'echarts-gl/components';

echarts.use(
    [GlobeComponent, CanvasRenderer]
);

export default {
  name: 'HelloWorld',
  data() {
    return {
option = {
    backgroundColor: '#000',
    globe: {
        baseTexture: ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg",
        heightTexture: ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg",
        displacementScale: 0.04,
        shading: 'realistic',
        environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
        realisticMaterial: {
            roughness: 0.9
        },
        postEffect: {
            enable: true
        },
        light: {
            main: {
                intensity: 5,
                shadow: true
            },
            ambientCubemap: {
                texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
                diffuseIntensity: 0.2
            }
        }
    }
}
    }
  },
  mounted() {
    this.myEcharts = echarts.init(this.$refs.hello)
    this.myEcharts.setOption(this.options)
  },
  mixins: [resize]
}
</script>

<style lang="sass" scoped>
.pie-chart
    width: 100%
    height: 400px
</style>
